<head>
	<meta charset="utf-8">
	<title>Meteor • TodoMVC</title>
</head>
<body>
	<section id="todoapp" data-framework="meteor">
		{{> todoapp}}
	</section>
	<footer id="info">
		<p>Double-click to edit a todo</p>
		<p>Created by Matthias Stumpp - <a href="http://github.com/MStumpp">GitHub</a>&nbsp;&nbsp;<a href="http://twitter.com/MatStumpp">Twitter</a></p>
		<p><a href="http://todomvcapp.meteor.com">Meteor TodoMVC</a></p>
		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
	</footer>
</body>

<template name="todoapp">
	<header id="header">
		<h1>todos</h1>
		<input id="new-todo" placeholder="What needs to be done?" autofocus>
	</header>
	{{#if todos}}
		{{> main}}
		{{> footer}}
	{{/if}}
</template>

<template name="main">
	<section id="main">
		<input id="toggle-all" type="checkbox" checked="{{#unless todos_not_completed}}checked{{/unless}}">
		<label for="toggle-all">Mark all as complete</label>
		<ul id="todo-list">
			{{#each todos}}
				{{> todo}}
			{{/each}}
		</ul>
	</section>
</template>

<template name="todo">
	<li class="{{#if todo_completed}}completed{{/if}}{{#if todo_editing}}editing{{/if}}">
		<div class="view">
			<input class="toggle" type="checkbox" checked="{{#if todo_completed}}checked{{/if}}">
			<label>{{title}}</label>
			<button class="destroy"></button>
		</div>
		<input class="edit" value="{{title}}">
	</li>
</template>

<template name="footer">
	<footer id="footer">
		<span id="todo-count"><strong>{{todos_not_completed}}</strong>
			{{#if todos_one_not_completed}}item{{else}}items{{/if}} left</span>
		<ul id="filters">
					{{#each filters}}
						<li>
							<a class="{{#if filter_selected this}} selected {{/if}}" href="#/{{this}}">{{this}}</a>
						</li>
					{{/each}}
		</ul>
		{{#if todos_completed}}
			<button id="clear-completed">Clear completed</button>
		{{/if}}
	</footer>
</template>
